<!-- 订单列表 -->
<template>
  <div class="order_list">
    <!-- 自定义表格 -->
    <MyTable
      :tableData="tableData"
      :columnData="columnData"
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      :pageSizeArr="pageSizeArr"
      :showPager="true"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <!-- 使用插槽实现操作栏,注意这里的作用域插槽的传值方式,通过解构的方式获取 -->
      <template v-slot:opt="{ row }">
        <el-icon class="c_p" @click="doEdit(row)" size="20">
          <Edit />
        </el-icon>
        <el-icon class="m_l_14 c_p" @click="doDelete(row)" size="20">
          <Delete />
        </el-icon>
      </template>
    </MyTable>
  </div>
</template>

<script setup>
//自定义表格
import MyTable from "../../../components/table/MyTable";

//分液器的配置
let total = ref(100);
let currentPage = ref(1);
let pageSize = ref(10);
let pageSizeArr = reactive([10, 15, 20]);

//表格的配置信息
const columnData = [
  {
    //prop名称,也就是取值的key
    prop: "date",
    //label,表头显示的label标签
    lable: "Date",
    //宽度
    width: 180,
  },
  {
    //prop名称,也就是取值的key
    prop: "name",
    //label,表头显示的label标签
    lable: "Name",
    //宽度
    width: 180,
  },
  {
    //prop名称,也就是取值的key
    prop: "address",
    //label,表头显示的label标签
    lable: "Address",
    width: 400,
  },
  {
    //label,表头显示的label标签
    lable: "操作",
    //showTemp:true,用于自定义el-table-column里面作用域插槽的模板
    showTemp: true,
    //用于识别该列 是否 为操作列
    value: "opt",
  },
];

//表格数据
const tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

//编辑表格的某一行的操作
const doEdit = (row) => {
  console.log("作用域插槽传递的数据是:", row);
};

//删除表格的某一行的操作
const doDelete = (row) => {
  console.log("作用域插槽传递的数据是:", row);
  //这里去做对应的数据处理,然后更新表格数据
};

//page-size 改变时触发
const handleSizeChange = (val) => {
  console.log("传递的参数是:", val);
};

//current-page 改变时触发
const handleCurrentChange = (val) => {
  console.log("传递的参数是:", val);
};
</script>
<style lang="scss" scoped>
.order_list {
  width: 100%;
  height: 100%;
}
</style>
